<template>
    <view :class="$style.page">
        <view style="height: 100%; position: relative; overflow-y: auto;">
            <PageHeader>
            <view class="PAGE_TITLE">待办</view>
        </PageHeader>
        <view :class="$style.tabs">
            <view v-for="item in tabs" :key="item.key" :class="$style.tab" @tap="toggleTap(item.key)">
                <view :class="[$style.title, currentId == item.key ? $style.selected : '']">
                    {{ item.title }}
                </view>
            </view>
        </view>

        <template v-if="currentId == 1">
            <view :class="$style.tasks" v-if="dataRowsOfOa.length > 0">
                <view :class="$style.item" v-for="(item, index) in dataRowsOfOa" :key="index">
                    <view :class="$style.name">{{ item.appName }}</view>
                    <view :class="$style.subName">{{ item.subject }}</view>
                    <view :class="$style.detail">
                        <view :class="$style.title">通知详情</view>
                        <view :class="$style.row">
                            <view :class="$style.label">业务场景</view>
                            <view>{{ item.sceneName }}</view>
                        </view>
                        <view :class="$style.row">
                            <view :class="$style.label">接收时间</view>
                            <view>{{ parseTime(item.createTime) }}</view>
                        </view>
                    </view>

                    
                    <view class="m-t-40">
                        <button :plain="true" type="primary" @click="goNav(item)">查看详情</button>
                    </view>
                </view>
                
            </view>
            <template v-else>
                <template v-if="!loading">
                    <nut-empty description="暂无待办"></nut-empty>
                </template>
            </template>
        </template>
        <template v-else>
            <view :class="$style.tasks" v-if="dataRows.length > 0">
                <view :class="$style.item" v-for="(item, index) in dataRows" :key="index">
                    <view :class="$style.name">{{ item.appName }}</view>
                    <view :class="$style.subName">{{ item.subject }}</view>
                    <view :class="$style.detail">
                        <view :class="$style.title">通知详情</view>
                        <view :class="$style.row">
                            <view :class="$style.label">业务场景</view>
                            <view>{{ item.sceneName }}</view>
                        </view>
                        <view :class="$style.row">
                            <view :class="$style.label">接收时间</view>
                            <view>{{ parseTime(item.createTime) }}</view>
                        </view>
                    </view>

                    
                    <view class="m-t-40">
                        <button :plain="true" type="primary" @click="goNav(item)">查看详情</button>
                    </view>
                </view>
                
            </view>
            <template v-else>
                <template v-if="!loading">
                    <nut-empty description="暂无待办"></nut-empty>
                </template>
            </template>
        </template>
        </view>
        
        <TabBar />
    </view>
</template>

<script lang="ts" setup>
    import PageHeader from '@/components/PageHeader.vue'
    import TabBar from '@/TabBar/index.vue'
    import { taskListApi } from '@/api/Work';
    import { isMobile, parseTime } from '@/utils'
    import { ref } from 'vue';

    const loading = ref(true)
    const dataRowsOfOa = ref<any[]>([])
    const dataRows = ref<any[]>([])


    const currentId = ref(1)
    const tabs = [{title : 'OA待办', key : 1}, {title : '其它待办', key : 2}]



    function toggleTap(id:number) {
        if(id != currentId.value) {
            currentId.value = id
        }
    }



    uni.showLoading()
    taskListApi().then(r => {
        
        if(r.data) {

            r.data.forEach(item => {
                if(item.isOa) {
                    dataRowsOfOa.value.push(item)
                }else {
                    dataRows.value.push(item)
                }
            })

            
        }
        uni.hideLoading()
        loading.value = false
    })

    function goNav(item) {
        location.href = isMobile() ? item.h5ViewUrl : item.pcViewUrl
    }


    // uni.request({
    //     url : "https://r.inews.qq.com/api/ip2city"
    // })


</script>

<style lang="scss" module src="./index.scss"></style>